#include("/manage/_common/_layout.html")
#@layout()

### ********************************* 定义页面标题
#define title()
主题列表
#end

### ********************************* css导入
#define import_css()
#end

### ********************************* js导入
#define import_js()
#end

### ********************************* Body内容区开始
#define main()
<table class="layui-table">
	<thead>
		<tr>
			<th>操作</th>
			<th width="320px">预览</th>
			<th>详细</th>
		</tr>
	</thead>
	<tbody>
	#for(theme : themeList)
		<tr>
			<td style="text-align:center">#if(theme.id == currTheme.id)<span class="layui-badge-dot"></span>#else<a class="layui-btn layui-btn-xs jfsa-change-theme" theme-id="#(theme.id)">使用</a>#end</td>
			<td style="text-align:center">
				<div class="layui-carousel" id="#(theme.id)">
					<div carousel-item="">
					#for(screenshot : theme.screenshots)
						<div><img onclick="Jfsa.reviewImage(this);" style="max-width:320px; max-height: 180px" src="#(ctx)#(screenshot)"></div>
					#end
					</div>
				</div>
			</td>
			<td>
				<p>名称：#(theme.title)</p>
				<p>作者：#(theme.author)</p>
				<p class="layui-inline">说明：#(theme.description)</p>
				<p>版本：#(theme.version)</p>
				<p>网站：<a href="#(theme.authorWebsite)" target="_blank">#(theme.authorWebsite)</a></p>
			</td>
		</tr>
	#end
	</tbody>
</table>

#end
### ********************************* Body内容区结束

### ********************************* 脚本区开始
#define script()
<script>
layui.use(['jquery', 'layer', 'element', 'carousel'], function(){
	var $ = layui.jquery, layer = layui.layer,element = layui.element, form = layui.form, carousel = layui.carousel;

	$(".jfsa-change-theme").on("click", function(){
		changeTheme(this);
	});

#for(theme : themeList)
	carousel.render({
		elem: '#' + '#(theme.id)'
		,width: '320px' ### 设置容器宽度
		,height: '180px'
		,arrow: 'hover' ### 始终显示箭头
		,indicator: 'outside'
	});
#end

	function changeTheme(elem){
		var themeId = $(elem).attr("theme-id");
		layer.confirm("主题设置成功后页面将重置!", function(index){
			layer.close(index);
			$.ajax({ ### 用Ajax替换弹窗中的提交
				url : "#(ctx)/manage/theme/ajaxChangeTheme",
				type : "post",
				data : {themeId: themeId},
				beforeSend : function(){layer.load(1);}, ### 防止重复操作
				complete : function(){layer.closeAll('loading');}, ### 解除防重复操作
				success : function(ret){
					if(ret.code == 0){
						window.top.location.href = "#(ctx)/manage";
					} else {
						if(ret.msg){
							layer.alert(ret.msg, {icon: 0});
						} else {
							layer.alert("操作失败！", {icon: 2});
						}
					}
				},
				error : function (e) { ### Ajax调用失败
					layer.alert("操作失败：" + e.responseText, {icon: 2});
				}
			});
		});
	}
});
</script>
#end
###********************************* JS脚本区结束
